<template>
	<div>
		<!--开个价弹出框-->
		<van-popup
		  :close-on-click-overlay="false"	
		  @click-overlay="cancle"	
		  v-model="showPricePopup"
		  position="bottom"
		  :style="{ height: 'auto' }"
		>     
		
	        <div class="cellGroup borderBottom" @click='changeActiveInput(1)'>
	        	<span class="cellLabel">价格</span>
	        	<span class="cellValue">
	        		<span class="placehode" v-if="!comPrice">￥0.00</span>
	        		<span class="input"><span v-if="comPrice">￥</span>{{comPrice}}</span>
	        		<span class="animation" v-if="activeInput==1"></span>
	        	</span>
	        </div>
        
	        
	        <div class="cellGroup borderBottom" @click='changeActiveInput(2)'>
	        	<span class="cellLabel">入手价</span>
	        	<span class="cellValue">
	        		<span class="placehode" v-if="!comOriginalprice">￥0.00</span>
	        		<span class="input"><span v-if="comOriginalprice">￥</span>{{comOriginalprice}}</span>
	        		<span class="animation" v-if="activeInput==2"></span>
	        	</span>
	        </div>
        
	        <div class="cellGroup" @click='changeActiveInput(3)'>
	        	<span class="cellLabel">运费</span>
	        	<span class="cellValue">
	        		<span class="placehode" v-if="!freight">{{defaultFreight}}</span>
	        		<span class="input"><span v-if="freight">￥</span>{{freight}}</span>
	        		<span class="animation" v-if="activeInput==3&&canInput"></span>
	        	</span> 	        	
	        	
	        	<div style="margin-right: 10px;" @click="changeFree">
                    <img src="../../../../static/img/lanhu/41.png" alt="" class="checkBox" v-if="!comIspost"/>
                    <img src="../../../../static/img/lanhu/42.png" alt="" class="checkBox" v-else/>
                	<span style="color: #999;">包邮</span>	               		                
	        	</div>
	        	
	        	<div @click="changeDistance">
                    <img src="../../../../static/img/lanhu/41.png" alt="" class="checkBox" v-if="!distance"/>
                    <img src="../../../../static/img/lanhu/42.png" alt="" class="checkBox" v-else/>
                	<span style="color: #999;">按距离计算</span>	              			                
	        	</div>	
	        	
	        </div>
	        
	        
			<div clas="keyboard">
	           <table cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
	           	  <tr>
	           	  	<td class="w25">
	           	  		<div class="cc blod" @click="changePrice(1)">1</div>
	           	  	</td>
	           	  	<td class="w25">
	           	  		<div class="cc blod" @click="changePrice(2)">2</div>
	           	  	</td>
	           	  	<td class="w25">
	           	  		<div class="cc blod" @click="changePrice(3)">3</div>
	           	  	</td>
	           	  	<td rowspan="2">
	           	  		<div class="cc" @click="clearPrice">
	           	  			<img src="../../../../static/img/lanhu/39.png" alt="" style="width: 25px;height: 19px;"/>
	           	  		</div>
	           	  	</td>
	           	  </tr>
	           	  <tr>
	           	  	<td class="w25"><div class="cc blod" @click="changePrice(4)">4</div></td>
	           	  	<td class="w25"><div class="cc blod" @click="changePrice(5)">5</div></td>
	           	  	<td class="w25"><div class="cc blod" @click="changePrice(6)">6</div></td>
	           	  </tr>  
	           	  <tr>
	           	  	<td class="w25"><div class="cc blod" @click="changePrice(7)">7</div></td>
	           	  	<td class="w25"><div class="cc blod" @click="changePrice(8)">8</div></td>
	           	  	<td class="w25"><div class="cc blod" @click="changePrice(9)">9</div></td>
	           	  	<td rowspan="2" style="background: #fceb22;" @click="confirmPrice()">
	           	  		<div class="cc" style="font-size: 18px;font-weight: bold;">确定</div>
	           	  	</td>
	           	  </tr> 
	           	  <tr>
	           	  	<td class="w25"><div class="cc blod" @click="changePrice('.')">.</div></td>
	           	  	<td class="w25"><div class="cc blod" @click="changePrice(0)">0</div></td>
	           	  	<td class="w25">
	           	  		<div class="cc blod" @click="cancle">
	           	  		    <img src="../../../../static/img/lanhu/40.png" alt=""  style="width: 16px;height: 9px;"/>
	           	  		</div>
	           	  	</td>           	  	
	           	  </tr>
	           </table>		
			</div>	
		</van-popup>
	</div>	
</template>

<script>
import {getFun} from '@/api/publicFun.js'	 
let publicFun=getFun()	
export default {	
	data() {
       return {
         activeInput:'1', // 用于绑定现在作用于哪个输入框
         comPrice:'',    // 用于绑定商品售价
       	 comOriginalprice:'', // 用于绑定商品原价
       	 comIspost:false,  // 用于绑定是否包邮
       	 freight:'',    // 用于绑定商品运费
       	 distance:false,  // 绑定距离复选框
       	 defaultFreight:'￥0.00', // 运费默认显示文字
       	 canInput:true,
       	 showPricePopup:false,
       	 comId:'', // 记录商品ID
       	 index:'', // 记录改变商品的序号
       	 url1:this.$api+'/marketorderservice/api/v1/market/updateGoods' // 编辑商品
       }
	},
	methods: {	
	  showWin(item,index){
	  	this.showPricePopup=true
	  	this.comId=item.comId
	  	this.index=index
	  	this.init(item.comPrice,item.comOriginalprice,item.freight,item.comIspost)
	  },
	  // 初始化渲染函数
	  init(comPrice,comOriginalprice,freight,comIspost){
	  	if(!comOriginalprice){
	  		this.comOriginalprice=''
	  	}else{
	  		this.comOriginalprice=comOriginalprice
	  	}
	  	this.comPrice=comPrice
	  	if(!freight){
	  		this.freight=''
	  	}else{
	  		this.freight=freight
	  	}
	  	if(comIspost>0){
	  	   this.defaultFreight="包邮"	
	  	   this.canInput=false
	  	   this.comIspost=comIspost>0?true:false
	  	}
	  },
	  // 关闭弹框	
	  cancle(){
	  	 this.showPricePopup=false
	  },
      // 改变光标
      changeActiveInput(num){      	
      	this.activeInput=num      	
      	if(this.comPrice){
      		this.comPrice=Number(this.comPrice).toFixed(2)
      	}
      	if(this.comOriginalprice){
      		this.comOriginalprice=Number(this.comOriginalprice).toFixed(2)
      	}
      	if(this.freight){
      		this.freight=Number(this.freight).toFixed(2)
      	}   	
      },		
	  // 清除按钮点击事件
	  clearPrice(){
	  	let str=this.activeInput.toString()
		switch(str) {
		     case '1':
		        this.comPrice=''
		        this.$emit('clear')   	
		        break;
		     case '2':		     
		        this.comOriginalprice=''
		        break;		        
		     case '3':
		        this.distance=false
		        this.comIspost=false
		        this.freight=''
		        this.defaultFreight='￥0.00'
		        break;
		}
	  },
      changeFree(){ 
      	this.freight=''
      	// 取消包邮
      	if(this.comIspost){
      		this.comIspost=false    		
      		this.defaultFreight='￥0.00'
      		this.canInput=true
      	}
      	// 选中包邮
      	else{
      		this.comIspost=true
      		this.canInput=false
      		this.distance=false
      		this.defaultFreight='包邮'
      	}
      },
	  changeDistance(){
	  	this.freight=''
	  	// 取消距离
      	if(this.distance){
      		this.distance=false
      		this.freight=''
      		this.defaultFreight='￥0.00'
      		this.canInput=true
      	}
      	// 选中距离
      	else{
      		this.distance=true
      		this.canInput=false
      		this.comIspost=false 
      		this.defaultFreight='按距离计算'
      	}	  	
	  },
	  // 点击数字修改价格(数字)
	  changePrice(num){
        let str=this.activeInput.toString()
		switch(str) {
		     case '1':
		        // 阻止没有数字直接输入.或者出现2个. 
		        if(num=='.'){
		          if(!this.comPrice||this.comPrice.indexOf('.')>=0){
		          	return false
		          }
		        }
		        this.comPrice+=num
		        break;
		     case '2':
		        if(num=='.'){
		          if(!this.comOriginalprice||this.comOriginalprice.indexOf('.')>=0){
		          	return false
		          }
		        }		     
		        this.comOriginalprice+=num
		        break;		        
		     case '3':
		        if(!this.canInput){
		        	return false
		        }else{
			        if(num=='.'){
			          if(!this.freight||this.freight.indexOf('.')>=0){
			          	return false
			          }
			        }		     
			        this.freight+=num		        	
		        }

		        break;
		} 	  		  	
	  },
	  // 确认价格
      confirmPrice(){      	
      	if(!this.comPrice){
      		this.$toast('请确认输入售价');
      		return false
      	}
      	// 修正位数
      	this.comPrice=Number(this.comPrice).toFixed(2)
      	if(this.comPrice=='0.00'){
      		this.$toast('售价必须大于0');
      		return false      		
      	}
      	if(this.comOriginalprice){
      		this.comOriginalprice=Number(this.comOriginalprice).toFixed(2)
      	}
      	if(this.freight){
      		this.freight=Number(this.freight).toFixed(2)
      	}
      	let obj={
         comPrice:this.comPrice,   
       	 comOriginalprice:this.comOriginalprice, 
       	 comIspost:this.comIspost?1:0,  
       	 freight:this.freight,
       	 comId:this.comId
      	}  
      	let that=this
		this.$Axios2.Post(this.url1,obj).then(function(res) {
		  	that.$emit('confirm',obj,that.index)
		  	that.showPricePopup=false
		})	      	
      	 	
      }
      
	},
	mixins:[publicFun],//混入		
	mounted() {
	}
}	
</script>

<style scoped="">
.cc{display: flex;align-items: center;justify-content: center;}	
table{width: 100%;border:1px solid #ccc}
td{ border: 1px solid #f0f0f0;}
.w25{width: 25%;height: 60px;}
.blod{font-weight: bold;font-size: 18px;}
.animation{display: inline-block;
width:1px;height:13px;animation: blink 1s infinite steps(1, start)}  
@keyframes blink {
 0%{
   background-color: white;
 }
 50% {
   background-color: black;
 }
 100% {
   background-color: white;
 }
 }
.cellGroup{padding: 15px 10px;display: flex;}
.borderBottom{border-bottom:1px solid #f0f0f0;}
.cellGroup>span{display: inline-block;}
.cellLabel{width: 60px;font-size: 14px;color: #333;}
.cellValue{flex: 1;font-size: 16px;position: relative;}
.placehode{position: absolute;left: 0;color: #999;font-size: 14px;} 
.input{font-size: 14px;}
.tips{color: #ff8080;padding-top: 3px;}
.tips_icon{vertical-align: -3px;margin-left: 10px;font-size: 16px;}
.checkBox{width: 14px;height: 14px;vertical-align: middle;margin-right: 8px;}
</style>